<template>
  <div class="main">
    <div class="search">
      <el-form :inline="true" :model="searchObj" class="demo-form-inline">
        <el-form-item label="">
          <el-input v-model="searchObj.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchObj.name" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" style="width: 100%">
      <el-table-column prop="mobile" label="用户手机号" width="180">
      </el-table-column>
      <el-table-column prop="nickname" label="用户昵称" width="180">
      </el-table-column>
      <el-table-column prop="createdAt" label="获取时间">
        <template slot-scope="scope">
          {{format(new Date(scope.row.createdAt))}}
        </template>
      </el-table-column>
      <el-table-column prop="prizeName" label="奖励">
        <template slot-scope="scope">
          {{scope.row.prizeName}}&nbsp;&nbsp;&nbsp;&nbsp;
          <span v-if="scope.row.endEffectiveDate">
            截止{{format(new Date(scope.row.endEffectiveDate))}}有效
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="userStatus" label="使用情况">
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination>
  </div>
</template>

<script>
  import {
    luckDraw
  } from '@/api/activity/luckDraw'
  Date.prototype.format = function(fmt) {
    var o = {
      "M+": this.getMonth() + 1, //月份
      "d+": this.getDate(), //日
      "h+": this.getHours(), //小时
      "m+": this.getMinutes(), //分
      "s+": this.getSeconds(), //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return fmt;
  }
  export default {
    data() {
      return {
        searchObj: {},
        formInline: {
          user: '',
          region: ''
        },
        pageSize: 10,
        currentPage: 1,
        totalCount: 0,
        tableData: []
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      format(time) {
        return time.format('yyyy-MM-dd hh:mm:ss')
      },
      getData() {
        this.tableData = []
        luckDraw.luckDrawRecord({
          luckId: this.$route.query.luckId,
          mobile: this.searchObj.phone,
          nickname: this.searchObj.name,
          pageIndex: this.currentPage,
          pageSize: this.pageSize,
          platform: 1
        }).then(res=>{
          console.log("res", res)
          if (res.code == 200) {
            this.tableData = res.data
            this.totalCount = res.totalCount
          } else {
            this.$message.error(res.message)
          }
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.getData()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val
        this.getData()
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .search {
    display: flex;
    flex-direction: row;

    .el-input {
      width: 180px;
    }
  }
</style>
